<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片换底色</title>
    <script src="jquery-3.4.1.js"></script>


<style lang="">
	*{
		margin: 0;
	}
	html,body{
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#wrap{
		width: 100%;
		margin: 0 auto;
	}
	.title{
		text-align: center;
	}
	.upload{
		width: 380px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin-top: 20px;
	}
	.upload .upload-input{
		opacity: 0;
		position: absolute;
		z-index: 99;
		width: 110px;
		cursor: pointer;
	}
	.upload .custom-upload, .upload .test, .upload .btn-fengge{
		width: 100px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		background-color: #09c6ff;
		color: #fff;
		cursor: pointer;
		border-radius: 25px;
	}
	.upload .test{
		width: 120px;
	}
	.img-wrap{
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}
	.img-wrap .second{
		margin: 0 20px;
	}
	.img-wrap h3{
		margin-bottom: 10px;
	}
    .img1, .img2{
        width: 200px;
        height: 280px;
        /* margin-left: 300px; */
        border: 1px solid #000;
    }
	
    .color{
    	width: 50px;
    	height: 50px;
    	border-radius: 50%;
    	border: 3px solid #555;
    	outline: none;	
		margin-top: 30px;
    }
    .btn1{
    	background-color: red;	
    }
   .btn2{
		background-color: #fff;
	}
   .btn3{
		background-color: blue;
	}
	.btn4{
		background-color: yellow;
	}
	.download-btn{
		width: 80px;
		margin-top: 30px;
	}
	.img1,.img2,#myCanvas{
		background-color: #ddd;
	}
</style>
</head>
<body>
	<div id="wrap">
		<div class="title">
			<h1 >照片换底色</h1>
		</div>
		<div class="upload">
			<input type="file" class="upload-input"/>
			<div class="custom-upload">上传照片</div>
			<div class="test">选择测试照片</div>
			<div class="btn-fengge">分割图像</div>
		</div>
    	<div class="img-wrap">
			<div class="first">
				<h3>原图:</h3>
				<img src="./img/zjz.jpg" class="img1">
			</div>
			<div class="second">
				<h3>人像分割结果:</h3>
				<img src="" class="img2"/>
			</div>
			<div class="three">
				<h3>换底色结果:</h3>
    			<canvas id="myCanvas" width="200" height="280"></canvas>
			</div>
		</div>
		<div id="change-btn">
			<button class="btn1 color" color-data="red"></button>
			<button class="btn2 color" color-data="white"></button>
			<button class="btn3 color" color-data="blue"></button>
			<button class="btn4 color" color-data="yellow"></button>
			<span>当前选择：</span><span class="tips"></span>
		</div>
		<input class="download-btn" type="button" value="下载照片" onclick="down('img1')">
	</div>
<script>

	//  图像分割的回调
	function callBack(data){
		console.log(data);
	}
		let first_img = document.getElementsByClassName("img1")[0];  //  原图img
        let imgbox = document.getElementsByClassName("img2")[0];  //  使用第一个img元素
		console.log(imgbox)
		let base_url = 'http://192.168.1.191:8082';

		$(".btn-fengge").click(() => {
			
			cutoutImg(callBack);
		})
		// $(".test").click(() =>{
		// 	first_img.src = "./img/zjz.jpg";
		// })
		//  图像分割
		function cutoutImg(call){
			$.ajax({
				type:"POST",
				data: {
					// image: curr_img
				},
				url: `${base_url}/result`,
				success: (res) => {
					console.log("请求成功",res.data);
					imgbox.src = base_url + res.data;  //分割后的图片
					call(res.msg);
				},
				error: () => {
					console.log('error');
				}
			})
		}
		//  更换底色		
		$(".color").click(function(){
			let colorName = this.getAttribute('color-data');
			cxt.fillStyle = colorName;
			cxt.fillRect(0, 0, c.width, c.height);
			cxt.drawImage( img, 0, 0, 200, 280);
			let tipsBox = document.getElementsByClassName("tips")[0];
			if(colorName == "red"){
				tipsBox.innerHTML = "红色";
			}else if(colorName == "white"){
				tipsBox.innerHTML = "白色";
			}else if(colorName == "blue"){
				tipsBox.innerHTML = "蓝色";
			}else if(colorName == "yellow"){
				tipsBox.innerHTML = "黄色";
			}
			// data.src = c.toDataURL("image")   //转为base64,   png格式的图片(透明背景)
		})

		//  初始化 渲染canvas
		// function renderCanvas(){
			var c = document.getElementById("myCanvas");
			var cxt = c.getContext("2d");
				
			var img = new Image();
				img.src =  "http://192.168.1.191:8082/result.jpg";
				img.onload = function(){
					console.log('加载完毕', img.src)
					cxt.fillStyle = 'red';  //  默认红色
					cxt.fillRect(0, 0, c.width, c.height);
					// 将图片画到canvas上面上去！
					cxt.drawImage( img, 0, 0, 200, 280);
				}
		// }
		//  下载图片
		function down(selector, name) {
				// 生成一个a元素
				var a = document.createElement('a');
				// 将a的download属性设置为我们想要下载的图片名称
				a.download = name || 'zjz';
				// 将生成的URL设置为a.href属性
				// a.href = imgbox.src?imgbox.src: (alert("暂无照片可下载V_V"));
				if(imgbox.src){
					a.href = imgbox.src;
					a.click();
				}else{
					alert("暂无照片可下载V_V");
				}
		}

    </script>
</body>
</html>